<template class="firstpage">
  <div>
    <div class="boxMargin" style="margin: 20px 0;">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">
        <el-row>
          <el-col :span="24">
            <el-form-item style="float: left;" label="商品分类：" prop="categoryId" />
            <div style="display:inline-block;">
              <el-select v-for="(arrItem,key) in customData.categroyList" :key="key" v-model="customData.selectArr[key]" disabled style="margin-right:10px;" @focus="customData.position=key">
                <el-option v-for="item in arrItem" :key="item.categoryId" :value="item.categoryId" :label="item.categoryName" />
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="货号：">
              {{ form.skuCode }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品条码：" prop="upCode">
              {{ form.upCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="商品名称：" prop="goodsName">
              {{ form.goodsName }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品副标题：">
              {{ form.goodsSubtitle }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="商品简称：">
              {{ form.goodsSname }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="品牌：" prop="brandId">
              {{ form.brandName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="配送温度：">
              <el-select v-model="form.keepTemperature" placeholder="" clearable disabled>
                <el-option v-for="item in customData.keepTemperatureList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="宽：" prop="widthNum">
              {{ form.widthNum }}mm
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="高：" prop="heightNum">
              {{ form.heightNum }}mm
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="深：" prop="lengthNum">
              {{ form.lengthNum }}mm
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="商品重量：" prop="weightNum">
              {{ form.weightNum }}KG
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="创建时间：">
              {{ form.createTime }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="最新修改人：">
              {{ form.lastModifyUser }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="最新修改时间：">
              {{ form.lastModifyTime }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import _validate from '../../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../../framework/commonJs/wptx_tools'
import _common from '../../../../../framework/commonJs/wptx_common'
import _allApi from '../../../../../framework/API/apiAll'
import _api from '../../../../../framework/API/generalItem'
const _FUNCTION_NAME = ''
export default {
  filters: {},
  data() {
    return {
      tableData: [],
      searchData: {
      },
      searchDataBuffer: {
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {},
      historyData: {},
      infoData: {},
      customData: {
        brandNameList: [],
        keepTemperatureList: [
          { label: '冷藏(0-4℃)', value: '0' },
          { label: '常温', value: '1' },
          { label: '急冻(-18℃)', value: '2' }
        ],
        loading: false,
        categroyList: [],
        parentId: '',
        selectArr: [],
        position: null,
        versionId: '',
        itemId: ''
      },
      form: {
      },
      rules: {
        upCode: [
          { required: true, message: '请输入upCode', trigger: 'blur' }
        ],
        goodsName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        brandId: [
          { required: true, message: '请选择品牌', trigger: 'change' }
        ],
        widthNum: [
          { required: true, message: '请输入宽', trigger: 'blur' }
        ],
        heightNum: [
          { required: true, message: '请输入高', trigger: 'blur' }
        ],
        lengthNum: [
          { required: true, message: '请输入深', trigger: 'blur' }
        ],
        weightNum: [
          { required: true, message: '请输入商品重量', trigger: 'blur' }
        ],
        isPrecious: [
          { required: true, message: '请选择是否贵重物品', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },
  beforeDestroy() { },
  methods: {
    onInit() {
      const self = this
      self.customData.itemId = self.$route.query.itemId
      const params = {
        itemId: self.$route.query.itemId,
        itemVersionId: self.$route.query.itemVersionId
      }
      _api.infoDetail(self, params, self.callBack_infoDetail)
    },
    onSearch(data) {
      const self = this
    },
    onChangePage(data) {
      const self = this
    },
    onReset(data) {
      const self = this
    },
    onAdd(data) { },
    onDelete(data) {
      const self = this
    },
    onInfo(data) {
      const self = this
    },
    onUpdate(formName) {
      const self = this
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable(data) {
      const self = this
    },
    onEnable(data) {
      const self = this
    },
    onUpload(data) { },
    onBathUpload() { },
    onExport(data) { },
    onDownload(data) { },
    onHistory(data) { },
    callBack_infoDetail(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '详情数据加载超时，请刷新页面后重试', 'warning')
      } else {
        self.form = data.data
        self.$emit('func', data.data)
        sessionStorage.setItem('categoryId', data.data.categoryId)
        self.previewCategory(data.data.categoryIds, data.data.categoryNames) // 去请求分类
      }
    },
    previewCategory(idList, nameList) {
      const self = this
      if (_validate.checkListEmpty(idList)) {
        _validate.openTip(self, '分类数据加载超时，请刷新页面后重试', 'warning')
      } else {
        if (idList.length != nameList.length) {
          _validate.openTip(self, '分类数据加载超时，请刷新页面后重试', 'warning')
        } else {
          self.customData.selectArr = idList
          self.initPreviewCategoryList(idList, nameList)
        }
      }
    },
    initPreviewCategoryList(idList, nameList) {
      const self = this
      let currId
      let currName
      let parentId
      let isLeaf
      for (let cnt = 0; cnt < idList.length; cnt++) {
        currId = idList[cnt]
        currName = nameList[cnt]
        if (cnt == 0) {
          parentId = ''
        } else {
          parentId = idList[cnt - 1]
        }
        if (cnt == idList.length - 1) {
          isLeaf = 1
        } else {
          isLeaf = 0
        }
        const categoryInfo = {
          'categoryId': currId,
          'categoryName': currName,
          'parentId': parentId,
          'isLeaf': isLeaf,
          'categoryLevel': (cnt + 1)
        }
        const categoryList = []
        categoryList.push(categoryInfo)
        self.customData.categroyList.push(categoryList)
      }
    }
  }
}
</script>
<style scoped>
.w70{
    width: 70%;
}
</style>
